<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>多视图</title>
		<style>
			#div {
				border-bottom: 1px solid #ddd;
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
				background: white;
				margin: 20;
				border: 20;
			}
			
			#block1 {
				position: relative;
				float: left;
				height: 500px;
				width: 1100px;
				background: #96D1AF;
			}
			
			#block2 {
				position: relative;
				float: left;
				width: 350px;
				height: 500px;
				background: #FFDCDA;
			}
			
			#block3 {
				float: left;
				height: 200px;
				width: 450px;
				top: 500px;
				background: #FFFFB9;
			}
			
			#block4 {
				position: relative;
				float: left;
				/*clear: both;*/
				height: 200px;
				background: #DDE3E3;
				width: 1000px;
			}
		</style>
	</head>

	<body>
		<div id="block1"></div>
		<div id="block2"></div>
		<div id="block3"></div>
		<div id="block4"></div>
	</body>

</html>